import React, { Component } from 'react'

import { connect } from 'react-redux'
import { loadDataAsync } from '../actionCreater'

import CookBookUi from '../ui/CookBookUi'

@connect(
  state => ({
    list: state.home.list
  }),

  dispatch => ({
    loadData() {
      dispatch(loadDataAsync())
    }
  })
)
class CookBook extends Component {
  render() {
    return (
      <CookBookUi 
        list={this.props.list}
      ></CookBookUi>
    )
  }

  componentDidMount() {
    this.props.loadData()
  }
}

export default CookBook